<template>
  <div class="block pageList">
    <div class="title-container">
      <div class="title">教学理念发展历程</div>
    </div>
    <div style="color: #7F7F7F;font-size: 12px;text-align:right;margin-bottom: 20px;">最近更新时间：{{ pageForm.updateTime }}</div>
    <div style="display: flex; justify-content: space-between;">
      <div style="width: 48%;">
        <el-empty v-if="pageForm.length==0"></el-empty>
        <el-timeline :hide-timestamp="reverse">
          <el-timeline-item v-for="(item,index) in pageForm" :key="index" :hide-timestamp="reverse" placement="top" color="#409EFF">
           <div @click="handleCardClick(item,index)">
             <el-card :class="{ 'active-card': activeCard === index }" class="timeline-card"><el-descriptions :column="1">
                  <el-descriptions-item label="更新时间">{{item.updateTime}}</el-descriptions-item>
                  <el-descriptions-item label="教学理念">{{item.educationalPhilosophy}}</el-descriptions-item>
                </el-descriptions>
              </el-card>
           </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div style="width: 4%;" class="divider-container">
        <div class="divider"></div>
      </div>
      <div style="width: 48%;">
        <el-card class="box-card">
          <div class="title-container">
            <div class="title">详情</div>
          </div>
          <div class="content-container"> 
            <el-descriptions :column="1">
              <el-descriptions-item label="教师姓名">{{detailForm.teacherName || '暂无数据' }}</el-descriptions-item>
              <el-descriptions-item label="授课专业">{{detailForm.majorName || '暂无数据'}}</el-descriptions-item>
              <el-descriptions-item label="教学类型">{{ detailForm.teachTypeName || '暂无数据' }}</el-descriptions-item>
              <el-descriptions-item label="教学成果"></el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" :colon="false">
              <el-descriptions-item label="">
                <div class="achievement-item">
                  {{ detailForm.teachAchievement || '暂无数据' }}
                </div>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="" >
                <div class="achievement-item">
                  学生成绩量化提升：在《民族传统技艺》课程中推行 “分层教学 + 项目考核” 模式，学生期末作品优秀率从 2020 级的 29% 提升至 2023 级的 71%，其中民传 2102 班在省级职业技能大赛中获团体金奖，个人单项奖获奖率达 83%。通过建立 “课前微课预习 + 课中工单实训 + 课后企业项目跟进” 的闭环教学，学生职业技能鉴定通过率从 75% 提升至 98%，2023 届毕业生平均绩点较入学时提高 1.8 分，位列学院专业排名前 15%。
                </div>
              </el-descriptions-item> -->
            </el-descriptions>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { teachingTenetListApi, getRecentTeacherReflectionApi } from '@/api/teachingIdea/teachingTenet'
export default {
  data() {
    return {
      pageForm: {},
      detailForm: {},
      reverse: true,
      activeCard:'',
    };
  },
  created(){
    this.getTeachingGradesList()
  },
  methods:{
    async getTeachingGradesList() {
      try {
        const { rows } = await teachingTenetListApi()
        this.pageForm = rows;
        this.getData(rows[0].tenetId)
      } catch (error) {
        this.$message.error(error.msg || '获取详情失败')
      }
    },
    // 统一处理卡片点击事件
    handleCardClick(item,cardType) {
      this.activeCard = cardType;
      getRecentTeacherReflectionApi({teacherTenetId:item.tenetId}).then(res => {
        if (res.code === 200) {
          this.detailForm = res.data;
        }else{
          this.$message.error(res.msg || '获取详情失败')
        }
      })
    },

    getData(tenetId) {
      getRecentTeacherReflectionApi({teacherTenetId: tenetId}).then(res => {
        this.detailForm = res.data;
      })
    }
  }
};
</script>
<style scoped lang="scss">
.title-container {
  padding-left: 12px;
  border-left: 3px solid #409eff;  /* 蓝色竖线样式 */
  margin-bottom: 20px;
}

.title{
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
  font-weight: 650;
  font-size: 16px;
  padding-left: 10px;
  text-align: left;
}

// 分隔线容器样式
.divider-container {
  display: flex;
  justify-content: center; // 水平居中
  align-items: center;     // 垂直居中
}

// 分隔线样式调整
.divider{
  width: 1px;
  border: 1px dashed #ccc; /* 颜色变淡为浅灰色 */
  height: 80%; // 可以根据需要调整高度比例
}

// 成果项前添加黑色小圆点
.achievement-item {
  position: relative;
  padding-left: 20px; // 留出圆点位置

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px; // 垂直居中对齐文本
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #333; // 黑色圆点
  }
}

// 激活状态的卡片样式
::v-deep .timeline-card.active-card {
  background-color: #e6f7ff !important; /* 增加 !important 提高优先级 */
  border-color: #91d5ff !important;
  box-shadow: 0 2px 10px rgba(145, 213, 255, 0.3);
}
::v-deep .el-descriptions__body{
  background-color: transparent;
}
</style>